<template>
    <title>登录系统</title>
    <div class="login">
        <el-radio-group v-model="labelPosition" label="label position">
            <el-radio-button label="left">Left</el-radio-button>
            <el-radio-button label="right">Right</el-radio-button>
            <el-radio-button label="top">Top</el-radio-button>
        </el-radio-group>
        <div style="margin: 20px"></div>
        <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="ruleForm"
            style="max-width: 460px"
        >
            <el-form-item label="account">
                <el-input v-model="ruleForm.account" placeholder="账号" />
            </el-form-item>
            <el-form-item label="checkPass">
                <el-input v-model="ruleForm.checkPass" show-password placeholder="密码" />
            </el-form-item>
            <el-form-item label="验证码">
                <span><el-input v-model="captcha" placeholder="验证码" /></span>
                <img :src="captchaUrl" @click="getCaptcha" />
            </el-form-item>
            <div style="margin-bottom: 20px;" class="count-test">
                <el-radio-group @change="loginAccount" v-model="account">
                    <el-radio-button label="测试账号1"></el-radio-button>
                    <el-radio-button label="测试账号2"></el-radio-button>
                    <el-radio-button label="超级管理员"></el-radio-button>
                </el-radio-group>
            </div>

            <el-form-item>
                <el-button type="primary" @click="submitForm">Create</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script>
//import axios from 'axios'
import {requestLogin,getNavigationBar,getUserInfoByToken,getCaptcha,Validate} from '@/api/api';
import {filterAsyncRouter} from '@/router/index'
import router from '@/router'
//import store from '../store/store'

export default {
  name: 'login',
  data(){
    return{
        labelPosition:'left',
        ruleForm: {
            account: 'test',
            checkPass: 'test'
        },
        account: '测试账号1',
        captchaUrl:'',
        captcha:'',
        captchaCode:''
    }
  },
  methods:{
    loginAccount() {
        if (this.account == "测试账号1") {
            this.ruleForm.account = "test";
            this.ruleForm.checkPass = "test";
        } else if (this.account == "测试账号2") {
            this.ruleForm.account = "test2";
            this.ruleForm.checkPass = "test2";
        } else {
            this.ruleForm.account = "blogadmin";
            this.ruleForm.checkPass = "blogadmin";
        }
    },
    submitForm(){
        var _this = this;
        //验证验证码
        var param = {
            id:_this.captchaCode,
            code:_this.captcha
        }
        Validate(param).then(res=>{
            console.log(res);
            if(res.success){
                var loginParams = {name:_this.ruleForm.account, pass:_this.ruleForm.checkPass};
                //登录验证
                requestLogin(loginParams).then(data=>{
                        //console.log(data);
                        if(!data.success)
                        {
                            _this.$message({
                                message: data.msg ? data.msg : "重新登录",
                                type: 'error'
                            });
                            //_this.logining = false;
                            //_this.loginStr = "重新登录";
                        }
                        else{
                            this.$store.commit('setToken', data.response.token); 
                            window.localStorage.expires_in = data.response.expires_in;

                            //通过token获取用户信息
                            getUserInfoByToken({token:data.response.token}).then(userInfo=>{
                                if(!userInfo.success){
                                    _this.$message({
                                        message: userInfo.msg ? userInfo.msg : "获取用户信息失败！",
                                        type: 'error'
                                    });
                                }else{
                                    //获取用户信息成功
                                    window.localStorage.user = JSON.stringify(userInfo.response)
                                
                                    //获取用户菜单
                                    getNavigationBar({uid:userInfo.response.id}).then(NaviData=>{
                                        if(!NaviData.success)
                                        {
                                            _this.$message({
                                                message: NaviData.msg ? NaviData.msg : "获取菜单失败！",
                                                type: 'error'
                                            });
                                        }else{
                                            //获取成功
                                            window.localStorage.router = (JSON.stringify(NaviData.response.children));

                                            let userinfo = JSON.parse(window.localStorage.user ? window.localStorage.user : null);

                                            _this.$notify({
                                                type: "success",
                                                message: `登录成功 \n 欢迎管理员：${userinfo.realName} ！Token 将在${window.localStorage.expires_in / 60} 分钟后过期！`,
                                                duration: 6000
                                            });
                                            //console.log(NaviData.response.children)

                                            let getRouter = NaviData.response.children//后台拿到路由
                                            let getRouter1 = filterAsyncRouter(getRouter) //过滤路由
                                            router.$addRoutes(getRouter1) //动态添加路由

                                            _this.$router.replace(_this.$route.query.redirect ? _this.$route.query.redirect : "/");
                                            //_this.$router.replace("/");
                                        }
                                    })
                                }
                            })
                        }
                }).catch(error=>{
                        _this.$message({
                            message: error,
                            type: 'error'
                        });
                })
            }
            else{
                _this.$message.error('验证码有误！');
            }
       })
    },
    getCaptcha(){
        this.captchaUrl = '';
        this.captchaCode = Date.now();
        //console.log(this.captchaCode);
        this.captchaUrl = getCaptcha(this.captchaCode)
    }
  },
  mounted(){
    this.getCaptcha();
  }
}
</script>

<style scoped>
.login{
    width: 450px;
    margin: 180px auto;
    border: 1px solid #efefef;
    padding: 20px;
    border-radius: 10px;
}

</style>